<template>
	<view class="tui-userinfo-box">
		<tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
			<view class="tui-list-cell">
				<view>头像</view>
				<image v-if="userinfo.user_headimg" :src="userinfo.user_headimg" class="tui-avatar"></image>
				<image v-else src="/static/images/my/mine_def_touxiang_3x.png" class="tui-avatar"></image>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :hover="false">
			<view class="tui-list-cell tui-pr30">
				<view>用户名</view>
				<view class="tui-content">{{userinfo.user_tel}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="nickname">
			<view class="tui-list-cell">
				<view>昵称</view>
				<view class="tui-content">{{userinfo.nick_name}}</view>
			</view>
		</tui-list-cell>
		<!-- <tui-list-cell padding="0" :arrow="true">
			<view class="tui-list-cell">
				<view>性别</view>
				<view class="tui-content">{{userinfo.sex}}</view>
			</view>
		</tui-list-cell> -->
		<!-- <tui-list-cell padding="0" :arrow="true" unlined >
			<view class="tui-list-cell">
				<view>出生日期</view>
				<view class="tui-content">1986-09-27</view>
			</view>
		</tui-list-cell> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:'',
			}
		},
		onShow() {
			this.tui.haslogin();
			if(this.tui.isLogin()){
				this.userinfo = this.tui.getUserInfoData();
			}
		},
		methods: {
			changeAvatar(){
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					count: 1,
					success: (res) => {
						let max_size=5*1024*1024;
						// #ifdef H5
						if (res.tempFiles[0].type.indexOf("image") < 0) {
						   this.tui.toast("请选择图片类型的文件");
						   return;
						}
						// #endif
						
						if(res.tempFiles[0].size>=max_size){
							this.tui.toast("上传图片不能超过5M");
						
						}
						
							
						let token = this.tui.getToken();
						
						let datas={
							token: token,
						};
						console.log(res)
						let uper = this.tui.uploadFile('user',datas,res.tempFilePaths[0],'uploadHeadImg');
						Promise.resolve(uper).then((value)=>{
						   if(value.code==200){
						     	this.userinfo.user_headimg = value.data.avator;
								this.tui.setUserInfoData(this.userinfo);
						   }
						})
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						// #endif
					}
				})
			},
			nickname(){
				this.tui.href("../nickname/nickname")
			},

			
		}
	}
</script>

<style>
	.tui-userinfo-box {
		margin: 20rpx 0;
		color: #333;
	}

	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-pr30 {
		padding-right: 30rpx;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		display: block;
		border-radius: 50rpx;
	}

	.tui-content {
		font-size: 26rpx;
		color: #666;
	}
</style>
